<template>
  <div id="labTatRules">
    <Breadcrumb content="TAT时间规则设置" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="65">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">节点设置</div>
              <vxe-input clearable placeholder="关键字查询" class="vxeInputSearch" v-model="searchForm.keywords" @search-click="search" @keyup="keyup" type="search"></vxe-input>

              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getProcessSetList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="handleAdd"></vxe-button>
              <vxe-button type="text" icon="vxe-icon-save" content="保存" :loading="saveLoading" class="button-blue" @click="saveList"></vxe-button>
              <vxe-button type="text" class="button-red" icon="vxe-icon-delete" content="删除" @click="handleDelete"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table border show-overflow keep-source ref="tableRef" height="auto" :column-config="{ resizable: true }" :row-config="{isCurrent:true}" :loading="loading" :data="tatRuleList" :menu-config="menuConfig" @menu-click="contextMenuClickEvent">
              <vxe-column type="seq" width="30"></vxe-column>
              <vxe-column field="name" title="规则名称" width="180px" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #edit="{ row }">
                  <!-- <vxe-input v-model="row.name" type="text" class="myinput" /> -->
                  <VxePulldownSelection />
                </template>
              </vxe-column>
              <vxe-column field="snode" title="起始节点" :edit-render="{}" width="80px"></vxe-column>
              <vxe-column field="enode" title="终止节点" :edit-render="{}" width="80px"></vxe-column>
              <vxe-column field="rptGroup" title="报告单元" :edit-render="{}" width="120px">
                <template #default="{ row }">
                  <span>{{ row.rptGroup}}</span>
                </template>
                <template #edit="{ row }">
                  <vxe-select v-model="row.sex" transfer>
                    <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-column>
              <vxe-column field="barcodeType" title="条码类别" :edit-render="{}" width="80px">
              </vxe-column>
              <vxe-column field="feeItem" title="收费项目" :edit-render="{}" width="120px">
                <template #edit="{ row }">
                  <vxe-input v-model="row.feeItem" type="number"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="sampleType" title="标本类型" :edit-render="{}" width="80px">
                <template #edit="{ row }">
                  <vxe-input v-model="row.sampleType" type="number"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="patType" title="病人类型" :edit-render="{}" width="80px"></vxe-column>
              <vxe-column field="isUrgent" title="紧急" :edit-render="{}" width="60px"></vxe-column>
              <vxe-column field="minNum" title="最小时间" :edit-render="{}" align="center" width="80px">
                <template #edit="{ row }">
                  <vxe-input v-model="row.minNum" type="number"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="maxNum" title="最大时间" :edit-render="{}" align="center" width="80px">
                <template #edit="{ row }">
                  <vxe-input v-model="row.maxNum" type="number"></vxe-input>
                </template>
              </vxe-column>
              <vxe-colgroup title="时间段" align="center">
                <vxe-column field="sTime" title="开始" :edit-render="{}" align="center" width="60px">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.sTime" type="number"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="eTime" title="结束" :edit-render="{}" align="center" width="60px">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.eTime" type="number"></vxe-input>
                  </template>
                </vxe-column>
              </vxe-colgroup>
              <vxe-colgroup title="提醒时间" align="center">
                <vxe-column field="preWarnTime" title="预警" :edit-render="{}" align="center" width="60px">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.preWarnTime" type="number"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="warnTime" title="警告" :edit-render="{}" align="center" width="60px">
                  <template #edit="{ row }">
                    <vxe-input v-model="row.warnTime" type="number"></vxe-input>
                  </template>
                </vxe-column>
              </vxe-colgroup>
            </vxe-table>
          </div>
        </Pane>

        <Pane size="35">
          <el-tabs type="border-card">
            <el-tab-pane label="属性信息">
              <LabTatRulesForm />
            </el-tab-pane>
            <ExtraPropertyPanel :busRow="curSlectRow" />
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\BacGermDict.vue
import Breadcrumb from '../../../components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import LabTatRulesForm from './LabTatRulesForm.vue'; //基本信息表单组件
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';
import { isEmpty } from 'lodash';
import { AppStore } from '@/stores/store';
import { copyFileSync } from 'fs';
let store = AppStore();
// 全局变量定义区 ==========

let { proxy }: any = getCurrentInstance();

// 获取屏幕宽度
let conWidth = ref(document.documentElement.clientWidth);

// 页面标题
let content = ref('TAT时间规则设置');
// 用户输入关键字
const searchForm = reactive({
  keywords: ''
});
// 加载中 loading效果状态
let showLoading = ref(false); //刷新
let saveLoading = ref(false); //保存

const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const refUnqualifiedReason = ref<InstanceType<typeof refUnqualifiedReason>>(); //属性信息表单标记ref
let currentRow: any = reactive({ id: '', code: '' }); //基本信息表单当前行数据
// 模块功能表格数据
let tatRuleList: any = reactive([
  { name: '条码打印→标本采样', snode: '条码打印', enode: '标本采样', rptGroup: '生化7180(东院)', barcodeType: '临检血沉', feeItem: '肝功', sampleType: '全血', patType: '门诊', isUrgent: '否', minNum: 10, maxNum: 20, sTime: '00:00', eTime: '00:00', preWarnTime: 10, warnTime: 20 },
  { name: '标本采样→标本签收', snode: '标本采样', enode: '标本签收', rptGroup: '生化7180(东院)', barcodeType: '临检血沉', feeItem: '肝功', sampleType: '全血', patType: '门诊', isUrgent: '否', minNum: 10, maxNum: 20, sTime: '00:00', eTime: '00:00', preWarnTime: 10, warnTime: 20 },
  { name: '标本签收→标本上机', snode: '标本签收', enode: '标本上机', rptGroup: '生化7180(东院)', barcodeType: '临检血沉', feeItem: '肝功', sampleType: '全血', patType: '门诊', isUrgent: '否', minNum: 10, maxNum: 20, sTime: '00:00', eTime: '00:00', preWarnTime: 10, warnTime: 20 },
  { name: '标本上机→发布报告', snode: '标本上机', enode: '发布报告', rptGroup: '生化7180(东院)', barcodeType: '临检血沉', feeItem: '肝功', sampleType: '全血', patType: '门诊', isUrgent: '否', minNum: 10, maxNum: 20, sTime: '00:00', eTime: '00:00', preWarnTime: 10, warnTime: 20 },
  { name: '发布报告→标本留样', snode: '发布报告', enode: '标本留样', rptGroup: '生化7180(东院)', barcodeType: '临检血沉', feeItem: '肝功', sampleType: '全血', patType: '门诊', isUrgent: '否', minNum: 10, maxNum: 20, sTime: '00:00', eTime: '00:00', preWarnTime: 10, warnTime: 20 },
  { name: '标本留样→标本销毁', snode: '标本留样', enode: '标本销毁', rptGroup: '生化7180(东院)', barcodeType: '临检血沉', feeItem: '肝功', sampleType: '全血', patType: '门诊', isUrgent: '否', minNum: 10, maxNum: 20, sTime: '00:00', eTime: '00:00', preWarnTime: 10, warnTime: 20 },
]);

const curSlectRow = ref({});
//**判断为空*/
let IsEmpty = (value: any) => {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
};

// 方法定义区 =============
onMounted(() => {
  //getProcessSetList();
});
// 请求表格数据
function getProcessSetList() {
  showLoading.value = true;
  let pageParam = {
    params: {
      keywords: searchForm.keywords,
      orgId: store.userInfo.orgId
    }
  };
  //tatRuleList.length = 0; //放入数据前清空数组
  proxy.$http.get('/lab/process/set/getProcessSetList', pageParam).then(async (res: any) => {
    if (res.status.code === 200) {
      showLoading.value = false;
      // console.log('模块数据列表', res.status.code);
      //tatRuleList.push(...res.data);
      if (res && res.data && res.data.length > 0) {
        currentRow.id = '';
        tableCellClick({ row: res.data[0] });
        const $table = tableRef.value;
        if ($table) {
          await $table.setCurrentRow(res.data[0]);
        }
      }
    } else {
      showLoading.value = false;
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}

// 表格选中当前行
function tableCellClick({ row }: any) {
  curSlectRow.value = row;
  Object.assign(currentRow, row);
  proxy.$forceUpdate();
}

// 新增
function handleAdd() {
  const $formRef = refUnqualifiedReason.value;
  refUnqualifiedReason.value.addNew();
}

//保存
function saveList() {
  const $formRef = refUnqualifiedReason.value;
  refUnqualifiedReason.value.saveForm();
}

// 删除
function handleDelete() {
  const arr = tableRef.value?.getCheckboxRecords(true);
  // const sltTemplates = (proxy.$refs.templateTableRef as any).getCheckboxRecords();
  if (!(arr && arr.length > 0 && arr[0])) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    // console.log('arr===>', arr);

    const newNameArr = [];
    arr.forEach((itm) => {
      if (itm.isSysAtt) {
        newNameArr.push(itm.nodeName);
      }
    });
    // console.log('newNameArr',newNameArr);

    let node = newNameArr.join(',');
    // console.log('node===>', node);
    if (!isEmpty(node)) {
      VxeMessage('节点[' + node + ']是系统节点不允许删除', VxeNotifyType.info);
      return;
    }

    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { labProcessSets: arr };
        const url = '/lab/process/set/daleteProcess';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            VxeMessage(res.status.msg, VxeNotifyType.success);
            getProcessSetList();
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        //VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// 表格选中当前行
// function tableCellClick({ row }: any) {
//   curSlectRow.value = row;
//   Object.assign(currentRow, row);
//   proxy.$forceUpdate();
// }
</script>
<style lang="scss" scoped>
#labTatRules {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs--border-card {
        border: none;
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);
          margin: 5px 5px !important;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}

:deep(.el-row) {
  margin-left: 0 !important;
  margin-right: 0px !important;
}
</style>
